import { useQuery } from "@tanstack/vue-query";
import { asleep } from "common";
import { defineComponent } from "vue";
import Pending from "@/components/Pending";

const LoadDataView = defineComponent({
  setup() {
    const { isPending, data } = useQuery({
      queryKey: ["demo:load-data"],
      queryFn: async () => {
        await asleep(2000);
        return { data: "Data has been loaded!!" };
      },
    });

    // 根部如果是 Fragment，控制台会显示警告
    return () => <div>{isPending.value ? <Pending /> : <div>{data.value?.data}</div>}</div>;
  },
});

export default LoadDataView;
